<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <title>诗篇在线建站系统，通用信箱表单</title>
    <link rel="stylesheet" href="http://yui.yahooapis.com/3.4.1/build/cssreset/cssreset.css" type="text/css">
    <link rel="stylesheet" href="http://yui.yahooapis.com/3.4.1/build/cssfonts/cssfonts.css" type="text/css">
    <link rel="stylesheet" href="http://yui.yahooapis.com/3.4.1/build/cssbase/cssbase.css" type="text/css">
    <script src="http://yui.yahooapis.com/3.4.1/build/yui/yui-min.js"></script>
    <script type="text/javascript">
    	var formConfig = [{cname:"姓名",ename:"xingming",type:"text",required:true},
    	                   {cname:"电话",ename:"dianhua",type:"text",regex:[/^[0-9]+-*[0-9]+$/,"电话号码的格式：xxxx-xxxx或者xxxxxx"]},
    	                   {cname:"类别",ename:"leixing",type:"select",options:["你好","他好"]},
    	                   {cname:"公开",ename:"gongkai",type:"checkbox"},
    	                   {cname:"内容",ename:"content",type:"textarea",required:true,rows:"5",cols:"80"}];
    	var hiddens = {_modelName:"com.m3958.firstgwt.server.model.XinJian",
    			_operationType:"add",
    			_relationModelId:11252,//信箱目录ID，必须提供
    			siteId:8920};//站点ID，必须提供
    </script>
    <style type="text/css">
    th, td {
    	border: 0;
    	padding: 0.5em;
	}
	.form-label-td{
		text-align: right;
	}
    </style>
</head>
<body>
<!-- This template HTML will be used to render each todo item. -->
<script type="text/x-template" id="input-field-template">
	<tr>
		<td class="form-label-td"><span>{requiredSymbol}</span><label for="{ename}-field">{cname}</label></td>
		<td><input name="{ename}" id="{ename}-field" type="{type}"/></td>
		<td><span id="{ename}-field-message" class="field-messages"></span></td>
	</tr>
</script>
<script type="text/x-template" id="select-field-template">
	<tr>
		<td class="form-label-td"><span>{requiredSymbol}</span><label for="{ename}-field">{cname}</label></td>
		<td>
			<select name="{ename}" id="{ename}-field">
				
			</select>
		</td>
		<td><span id="{ename}-field-message" class="field-messages"></span></td>
	</tr>
</script>
<script type="text/x-template" id="textarea-field-template">
	<tr>
		<td class="form-label-td"><span>{requiredSymbol}</span><label for="{ename}-field">{cname}</label></td>
		<td><textarea name="{ename}" id="{ename}-field" rows="{rows}" cols="{cols}"></textarea></td>
		<td><span id="{ename}-field-message" class="field-messages"></span></td>
	</tr>
</script>
<div id = "form-div">
	<form action="" id="xinjian-form">
<!-- 	
	<input type="hidden" name="_modelName" value="com.m3958.firstgwt.server.model.XinJian"/>
	<input type="hidden" name="_operationType" value="add"/>
	<input type="hidden" name="_relationModelId" value="11252"/>
	<input type="hidden" name="siteId" value="8920"/>
-->
	<table>
		<caption></caption>
		<tbody>
		<tr id="insert-before-tr">
			<td  class="form-label-td"><label for="answer">验证码</label></td>
			<td><input type="text" name="answer" id="answer"/></td>
			<td><span id="answer-field-message" class="field-messages"></span></td>
		</tr>
	
		<tr>
			<td></td>
			<td><div id="captchaImgC"></div></td>
			<td><a href="#" id="refreshCaptcha">换一个图片</a></td>
		</tr>
		<tr>
			<td></td>
			<td><input type="submit" value="发送"/></td>
			<td><span id="" class="field-messages"></span></td>
		</tr>
		</tbody>
	</table>
	</form>
</div>
<div id="result-div" style="display:none;">
	您的留言已收到！
</div>
<script>
	// Create a YUI sandbox on your page.
	YUI().use('node', 'event','io-form','json-parse','transition','history', function (Y) {
		var xinjianFormNode = Y.one('#xinjian-form');
		
		//-----------history------------------------
		var history = new Y.HistoryHash();
		var uformConfig = history.get('formConfig');
		if(uformConfig){
			var t = decodeURIComponent(uformConfig);
			formConfig = Y.JSON.parse(t);
		}
		
		var uhiddens = history.get('hiddens');
		if(uhiddens){
			var t = decodeURIComponent(uhiddens);
			uhiddens = Y.JSON.parse(t);
		}

		//-----------hiddens------------------------
		var htpl = '<input type="hidden" name="{key}" value="{value}"/>';
		Y.each(hiddens,function(v,k,o){
			xinjianFormNode.appendChild(Y.Lang.sub(htpl,{key:k,value:v}));
		});
		
		//-----------captcha img------------------------
		var answerNode = Y.one('#answer');
		var cc = Y.one('#captchaImgC');
		cc.setContent('<img src="' + '/simpleImg?' + Math.random() + '" id="captchaImg"/>');
		var captchaImg = Y.one('#captchaImg');
		Y.on('click',function(e){
			e.preventDefault();
			captchaImg.set('src','/simpleImg?' + Math.random());
		},'#refreshCaptcha');
		//----------- ------------------------
		
		//-----------form ui build ------------------------
		var requiredSymbolSub = function(fi,str){
			var sm = "";
			if(fi.required){
				sm = "*";
			}
			return Y.Lang.sub(str,{requiredSymbol:sm});
		};
		var insert_before_tr = Y.one('#insert-before-tr');
		var input_tpl = Y.one('#input-field-template').getContent();
		var select_tpl = Y.one('#select-field-template').getContent();
		var textarea_tpl = Y.one('#textarea-field-template').getContent();
		Y.each(formConfig,function(fi){
			var field_tr;
			if(fi.type == "select"){
				field_tr = Y.Lang.sub(select_tpl,fi);
				field_tr = requiredSymbolSub(fi,field_tr);
				var n = Y.Node.create(field_tr);
				var select = n.one('select');
				Y.each(fi.options,function(o){
					select.appendChild('<option value="' + o + '">' + o + '</option>');
				});
				field_tr = n;
			}else if(fi.type == "textarea"){
				field_tr = Y.Lang.sub(textarea_tpl,fi);
				field_tr = requiredSymbolSub(fi,field_tr);
			}else{
				field_tr = Y.Lang.sub(input_tpl,fi);
				field_tr = requiredSymbolSub(fi,field_tr);
			}
			insert_before_tr.insert(field_tr,"before");
		});
		//----------- ------------------------
		
		//----------- io ------------------------
		var tH = {
			    start: function(id, args) {
			             ;
			    },
			    complete: function(id, o, args) {
			                ;
			    },
			    success: function(id, o, args) {
			    	var parsedResponse = Y.JSON.parse(o.responseText);
			    	if(!parsedResponse.response){
			    		alert("返回格式错误！");
			    		return;
			    	}
			    	var status = parsedResponse.response.status;
			    	var data = parsedResponse.response.data;
			    	if(status == 0 ){
			    		if(Y.Lang.isArray(data) && data.length == 1){
			    			Y.one('#form-div').hide('fadeOut',{},function(){
			    				Y.one('#result-div').show();
			    			});
			    		}else{
			    			alert("未知错误，请联系管理员！");
			    		}
			    	}else{
			    		var edata;
			    		if(Y.Lang.isArray(data) && data.length == 1){
			    			edata = data[0];
			    		}else{
			    			edata = data;
			    		}
			    		if(status == -110){//验证码错误
			    			if(edata.code == -11){
				    			Y.one('#answer-field-message').setContent("验证码错误，请重新输入");
				    			answerNode.set('value','');
				    			answerNode.setStyles({backgroundColor:"red"});
				    			return;
			    			}
			    		}
			    		alert(edata.message);
			    	}
			    },
			    failure: function(id, o, args) {
			               ;
			    },
			    end: function(id, args) {
					;
				}
			};
        var cfg = {
                on: {
                    start: tH.start,
                    complete: tH.complete,
                    success: tH.success,
                    failure: tH.failure,
                    end: tH.end
                },
                method:"POST",
                form: {
                    id: "xinjian-form",
                    useDisabled: true
                },
                context: tH,
                headers: {},
                arguments: {}
            };
        Y.on('submit',function(e){
        	e.preventDefault();
        	Y.all(".field-messages").setContent("");
        	var allowSubmit = true;
        	if(!answerNode.get('value') || answerNode.get('value').length != 5){
        		answerNode.focus();
        		answerNode.setStyles({backgroundColor:"red"});
        		Y.one('#answer-field-message').setContent("请输入5位验证码");
        		return;
        	}else{
        		answerNode.setStyles({backgroundColor:null});
        	}
        	Y.some(formConfig,function(fi){
        		var node = Y.one('#' + fi.ename + '-field');
        		var fieldMessageNode = Y.one('#' + fi.ename + '-field-message'); 
        		if(fi.required){
        			if(!node.get('value')){
        				fieldMessageNode.setContent(fi.cname + "必须填写！");
        				node.focus();
        				node.setStyles({backgroundColor:"red"});
        				allowSubmit = false;
        				return true;
        			}
        		}
    			if(fi.regex && node.get('value')){
    				if(!/fi.regex[0]/.test(node.get('value'))){
    					fieldMessageNode.setContent(fi.regex[1]);
        				node.focus();
        				node.setStyles({backgroundColor:"red"});
        				allowSubmit = false;
						return true;
    				}
    			}
    			node.setStyles({backgroundColor:null});
        	});
        	if(allowSubmit)Y.io('/smartcfud', cfg);
        },'#xinjian-form');
	});
</script>
</body>
</html>
<!-- 
使用方法：
	<iframe scrolling="auto" src="http://www.m3958.com/xinjian.html" frameborder="0" height="100%" width="100%"></iframe>
字段：
	private boolean audit;
	private String xingming;
	private String xingbie;
	@Temporal(TemporalType.DATE)
	private Date shengri;
	private String shouji;
	private String email;
	private String dianhua;
	private String dizhi;
	private String leixing;//是select类型
	private String youbian;
	private String title;
	@Lob
	@Basic(fetch=FetchType.LAZY)
	private String content;
	@Lob
	@Basic(fetch=FetchType.LAZY)
	private String reply;
	private String baomima;
	private boolean gongkai;
	@Temporal(TemporalType.TIMESTAMP)
	private Date repliedAt;
	
参数：	
	_componentId	isc_DynamicForm_2
	_dataSource	xinJianDS
	_modelName	com.m3958.firstgwt.server.model.XinJian
	_oldValues	{}
	_operationType	add
	_relationModelId	11252
	_tz	Asia/Shanghai
	content	sddssd
	isc_dataFormat	json
	isc_metaDataPrefix	_
	reply	
	siteId	8920
	title	dsdsd
	xingming	dsdsd
 -->